import { useState, useCallback } from 'react';
import { UserListInfo, MemoUserListInfo } from './UserListInfo';

export default function List() {
  const [users, setUsers] = useState('123 text');
  const [num, setNum] = useState(1);
  const fn = () => {
    return users;
  };

  const fnCallback = useCallback(fn, [users]);

  return (
    <>
      用户列表--{users}
      <br />
      <input type='text' onChange={e => setUsers(e.target.value)} />
      <br />
      num:{num}
      <button onClick={() => setNum(num + 1)}>++</button>
      <br />
      <MemoUserListInfo fn={fnCallback}></MemoUserListInfo>
    </>
  );
}
